<template>
	<div class="content">
		<div class="flex borderea box-align-center" style="height: 50px">
			<div class="title flex-1">体系分类概览</div>
			<div class="flex"></div>
		</div>

		<!-- 图表 -->
		<div class="parent mt10 flex flex-align-center">
			<div ref="chartRefbing1" style="width: 100%; height: 100%"></div>

			<button v-if="showPagination" @click="nextPage">下一页</button>
		</div>
	</div>
</template>

<script setup lang="ts">
import { ref, onMounted, onBeforeUnmount, nextTick } from 'vue'
import { min } from 'xe-utils'
import * as echarts from 'echarts'
import moment from 'moment'
import DynamicTable from './DynamicTable.vue'
import { overviewSystemClassificationApi } from '@/api/statistica'
const bzactivetype = ref(0)
const bzactiveyear = ref(0)
const typelist = ref(['全部', '分类总览', '分层总览'])
const currentYear = moment().year()
const bzyearlist = Array.from({ length: 4 }, (_, index) => currentYear - index)
const loading = ref(false)
const chartRefbzgl = ref(null)
const chartRefzhu = ref(null)
const chartRefbing1 = ref(null)
const chartRefbing2 = ref(null)
let chartInstancebing1: echarts.ECharts | null = null
let chartInstancebing2: echarts.ECharts | null = null
let chartInstancebzhu: echarts.ECharts | null = null

// 示例数据
const bzglchartsdata = {
	categories: [],
	series: []
}
const chartContainer = ref(null)
const currentPage = ref(0)
const pageSize = 10

const showPagination = ref(false)

const values = ref([
	25, 50, 75, 100, 52, 25, 50, 75, 100, 52, 25, 50, 75, 100, 52, 25, 50, 75, 100, 52, 25, 50, 75, 100, 52, 25, 50, 75, 100, 52, 25, 50, 75, 100, 52,
	25, 50, 75
])
const lends = ref([
	'城乡规划类',
	'市政、水务工程类',
	'水利工程专业基础标准',
	'建筑工程专业基础标准',
	'机电设备设计及制冷工程通用标准',
	'装配式建筑通用标准',
	'建筑工程施工、验收与检测通用标准',
	'建筑工程施工安全通用标准',
	'安装工程施工、验收与检测通用标准',
	'燃气、暖通工程设计 专用标准',
	'民用建筑电气 设计专用标准',
	'屋面、地面工程 施工、验收与检测专用标准',
	'木结构施工、验收与检测专用标准',
	'建筑工程施工机具安全专用标准',
	'岩土工程与地基基础类',
	'建筑工程类',
	'建材应用类',
	'建筑工程类',
	'信息技术应用类',
	'绿色建筑',
	'生态与环境工程类',
	'燃气、电力、供热类',
	'交通运输类',
	'工程建设管理类',
	'工程改造、维护与加固类分体系表',
	'建筑节能类',
	'详细规划专用标准',
	'基坑工程设计专用标准',
	'燃气、电力、供热类',
	'建材应用类'
])

const initChartbing1 = () => {
	if (!chartRefbing1.value) {
		return
	}

	chartInstancebing1 = echarts.init(chartRefbing1.value)

	const option = {
		title: {
			text: '',
			left: 'center'
		},
		tooltip: {
			trigger: 'item',
			formatter: '{b}: {c} '
		},
		series: [
			{
				name: '',
				type: 'pie',
				radius: '70%',
				avoidLabelOverlap: false,
				label: {
					show: true,
					position: 'outside',
					formatter: '{b}: {d}%'
				},
				emphasis: {
					label: {
						show: true,
						fontSize: '12',
						fontWeight: 'bold'
					}
				},
				data: lends.value.map((name, index) => ({
					name,
					value: values.value[index] || 1
				}))
			}
		]
	}

	chartInstancebing1.clear()
	chartInstancebing1.setOption(option)
}

// 响应式调整图表大小
const resizeChart = () => {
	chartInstancebing1?.resize()
}

const chartDatabing1 = ref(null)
onMounted(() => {
	window.addEventListener('resize', resizeChart)
	overviewSystemClassificationApi().then(res => {
		chartDatabing1.value = res.data
	})
	setTimeout(() => {
		nextTick(() => {
			initChartbing1()
		})
	}, 800)
})

// 转换函数
const transformToSeries = (legends, values) => {
	return legends.map((legend, legendIndex) => ({
		name: legend,
		data: values.map(item => item.value[legendIndex])
	}))
}
onBeforeUnmount(() => {
	window.removeEventListener('resize', resizeChart)

	chartInstancebing1?.dispose()
})

const zhudatainfo = ref(null)
</script>

<style lang="scss" scoped>
.content {
	height: 100%;
	width: 100%;
	display: flex;
	flex-direction: column;
}

.title {
	font-size: 15px;
	font-weight: 500;
	color: #333;
}

.tabbj {
	background-color: #f5f6fa;

	border-radius: 3px;
	color: #333;
	padding: 4px 0px;

	span {
		padding: 3px 5px;
		border-radius: 3px;
		margin: 0 3px;

		cursor: pointer;
		transition: all 0.3s ease;
		/* 添加过渡动画 */
	}

	.active {
		background-color: #fff;

		/*transform: translateY(-3px);*/
		color: #1491ff;
		/* 轻微上浮效果 */

		/* 阴影动画 */
	}
}

.paddingbottom10 {
	padding-bottom: 10px;
}

.borderea {
	border-bottom: solid 1px #ebeef5;
}

.parent {
	display: flex;
	flex-wrap: wrap;
	/* 允许换行 */
	gap: 10px;
	height: 100%;
	/* 子元素间距 */
}

.child {
	flex: 0 1 calc(50% - 10px);
	/* 撑满父元素宽度的一半，减去间距 */
	min-width: calc(50% - 10px);
	/* 防止内容过少时换行 */
	box-sizing: border-box;
	/* 包含 padding 和 border */
	// padding: 15px 10px;
	// background: #fafafc;
	// border-radius: 5px;
	display: flex;

	align-items: center;
}

.parenttitle {
	font-size: 14px;
	font-weight: 500;
	color: #666;
}

.parennumber {
	font-size: 12px;

	color: #333;

	span {
		font-size: 15px;
		font-weight: 600;
	}
}

/* font-family: Arial, sans-serif; */
</style>
